<template>
  <div>
    <el-table :data="page.list" class="stats-table">
      <!-- 事件字段 -->
      <template v-if="category == $t('common.base.event')">
        <el-table-column
          :label="$t('common.base.serialNumber')"
          prop="eventNo"
          width="150px"
          :show-overflow-tooltip="false"
        >
          <template slot-scope="scope">
            <sample-tooltip :row="scope.row">
              <template slot="content" slot-scope="{ isContentTooltip }">
                <el-tooltip
                  :content="scope.row.eventNo"
                  placement="top"
                  :disabled="!isContentTooltip"
                >
                  <a
                    href="#"
                    :data-id="scope.row.id"
                    data-form="event"
                    @click.prevent="openDetail(`event_view_${scope.row.id}`, `${$t('common.base.event')}${scope.row.eventNo}`, `/event/view/${scope.row.id}`)"
                  >
                    {{ scope.row.eventNo }}
                  </a>
                </el-tooltip>
              </template>
            </sample-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.label.eventType')"
          prop="templateName"
          width="120px"
        ></el-table-column>

        <el-table-column
          :label="$t('common.base.customer')"
          prop="customerName"
        ></el-table-column>

        <el-table-column :label="$t('common.label.principalName')" width="120px">
          <template slot-scope="scope">
            <template v-if="isOpenData">
              <open-data
                type="userName"
                :openid="scope.row.eUserStaffId"
              ></open-data>
            </template>
            <template v-else>
              {{ scope.row.eUserName }}
            </template>
          </template>
        </el-table-column>

        <el-table-column :label="$t('common.task.flow.finishTime')" width="180px">
          <template slot-scope="scope">
            {{ scope.row.completeTime | fmt }}
          </template>
        </el-table-column>
      </template>

      <!-- 工单字段 -->
      <template v-else>
        <el-table-column
          :label="$t('common.base.serialNumber')"
          prop="taskNo"
          width="150px"
          :show-overflow-tooltip="false"
        >
          <template slot-scope="scope">
            <sample-tooltip :row="scope.row">
              <template slot="content" slot-scope="{ isContentTooltip }">
                <el-tooltip
                  :content="scope.row.taskNo"
                  placement="top"
                  :disabled="!isContentTooltip"
                >
                  <a
                    href="#"
                    :data-id="scope.row.id"
                    @click.prevent="openDetail(`taskView_${scope.row.id}`, `${$t('common.base.task')}${scope.row.taskNo}`, `/task/view/${scope.row.id}`)"
                  >
                    {{ scope.row.taskNo }}
                  </a>
                </el-tooltip>
              </template>
            </sample-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.label.taskTemplate')"
          prop="templateName"
          width="120px"
        ></el-table-column>

        <el-table-column
          :label="$t('common.base.customer')"
          prop="customer.name"
        ></el-table-column>

        <el-table-column :label="$t('common.label.principalName')" width="120px">
          <template v-if="scope.row.executor" slot-scope="scope">
            <template v-if="isOpenData">
              <open-data
                type="userName"
                :openid="scope.row.executor.staffId"
              ></open-data>
            </template>
            <template v-else>
              {{ scope.row.executor.displayName }}
            </template>
          </template>
        </el-table-column>

        <el-table-column
          :label="`${$t('report.customer.label2')} (${$t('common.base.yuan')})`"
          v-if="category == $t('report.eventScoreChart.label3')"
          prop="profit"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.profit.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column
          :label="`${$t('report.customer.label3')} (${$t('common.base.yuan')})`"
          v-if="category == $t('task.list.displayName.profit')"
          prop="sale"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.sale.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column
          :label="`${$t('report.customer.label4')} (${$t('common.base.yuan')})`"
          v-if="category == $t('task.list.displayName.cost')"
          prop="cost"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.cost.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column :label="$t('common.task.flow.finishTime')" prop="templateName" width="180px">
          <template slot-scope="scope">
            {{ scope.row.completeTime | fmt }}
          </template>
        </el-table-column>
      </template>
    </el-table>

    <el-pagination
      class="stats-pagination"
      background
      @current-change="jump"
      :current-page="page.pageNum"
      layout="total, prev, pager, next"
      :total="page.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'client-statistics-table',
  props: {
    page: {
      type: Object,
      default: () => {},
      require: true,
    },
    category: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  methods: {
    jump(currentPage) {
      this.$emit('jump', currentPage);
    },
    openDetail(id, title, url){
      let fromId = window.frameElement.getAttribute('id');

      this.$platform.openTab({
        id, 
        title, 
        close: true, 
        url,
        fromId
      });
      
    },
  },
};
</script>
<style lang="scss" scoped></style>
